<template>
  <view class="page">
    <!-- 顶部轮播 Banner -->
    <swiper
      autoplay
      interval="3000"
      circular
      indicator-dots
      class="banner-swiper"
    >
      <swiper-item v-for="(image, index) in bannerImages" :key="index">
        <image :src="image" class="banner-image"></image>
      </swiper-item>
    </swiper>

    <!-- 功能区域 -->
    <view class="features-grid" v-show="false">
      <view class="feature-item" v-for="(feature, index) in features" :key="index">
        <image :src="feature.icon" class="feature-icon"></image>
        <text class="feature-name">{{ feature.name }}</text>
      </view>
    </view>

    <!-- 功能卡片列表 -->
    <view class="card-list" >
      <view class="card" v-for="(card, index) in cards" :key="index" @click="goCardDetail(card)" >
        <image :src="card.image" class="card-image"></image>
        <view class="card-info">
          <text class="card-title">{{ card.title }}</text>
          <text class="card-description">{{ card.description }}</text>
        </view>
      </view>
    </view>

    <!-- 作品展示区-->
    <view class="artwork-gallery">
      <text class="gallery-title">作品展示</text>
      <swiper
        class="artwork-swiper"
        scrollable
        display-multiple-items="2.5" 
        space-between="10"
      >
        <swiper-item v-for="(artwork, index) in artworks" :key="index" class="artwork-swiper-item">
          <view class="artwork-card">
            <image :src="artwork.image" class="artwork-image"></image>
            <view class="artwork-info">
              <text class="artwork-title">{{ artwork.title }}</text>
              <view class="uploader-info">
                <image :src="artwork.uploader.avatar" class="uploader-avatar"></image>
                <text class="uploader-name">{{ artwork.uploader.name }}</text>
              </view>
            </view>
          </view>
        </swiper-item>
      </swiper>
    </view>
  </view>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';

export default defineComponent({
  setup() {
    // 功能列表
    const features = ref([
      { name: '证件照生成', icon: '/static/icons/banner.png' },
      { name: '模特换装', icon: '/static/icons/banner.png' },
      { name: '2.5D 转绘', icon: '/static/icons/banner.png' },
      { name: '漫画风格', icon: '/static/icons/banner.png' },
    ]);

    // 卡片列表
    const cards = ref([
      { title: '证件照生成', description: '一键生成标准证件照', image: '/static/cards/card1.png' },
      { title: '模特换装', description: '一键更换模特服装风格', image: '/static/cards/aimodel.png' },
      { title: '2.5D 转绘', description: '将人物转化为 2.5D 风格', image: '/static/cards/card1.png' },
      { title: '文生图', description: '通过文字描述生成图片', image: '/static/cards/card1.png',action:'text2image' },
    ]);

    // 轮播图的图片
    const bannerImages = ref([
      '/static/banners/banner1.png',
      '/static/banners/banner2.png',
      '/static/banners/banner3.png'
    ]);

    // 作品数据
    const artworks = ref([
      {
        title: '苏格兰小姐姐',
        image: '/static/artworks/people1.png',
        uploader: {
          name: 'KingGu',
          avatar: '/static/avatars/avatar1.jpeg'
        }
      },
      {
        title: '中国小姐姐',
        image: '/static/artworks/people2.png',
        uploader: {
          name: 'KingGu',
          avatar: '/static/avatars/avatar1.jpeg'
        }
      },
      {
        title: '俄罗斯小姐姐',
        image: '/static/artworks/people10.png',
        uploader: {
          name: 'KingGu',
          avatar: '/static/avatars/avatar1.jpeg'
        }
      },
      {
        title: '印度小姐姐',
        image: '/static/artworks/people4.png',
        uploader: {
          name: 'KingGu',
          avatar: '/static/avatars/avatar1.jpeg'
        }
      },
      {
        title: '日本小姐姐',
        image: '/static/artworks/people7.png',
        uploader: {
          name: 'KingGu',
          avatar: '/static/avatars/avatar1.jpeg'
        }
      },
      {
        title: '美国小姐姐',
        image: '/static/artworks/people8.png',
        uploader: {
          name: 'KingGu',
          avatar: '/static/avatars/avatar1.jpeg'
        }
      },
	  {
	    title: '泰国小姐姐',
	    image: '/static/artworks/people5.png',
	    uploader: {
	      name: 'KingGu',
	      avatar: '/static/avatars/avatar1.jpeg'
	    }
	  },
	  {
	    title: '非洲小姐姐',
	    image: '/static/artworks/people9.png',
	    uploader: {
	      name: 'KingGu',
	      avatar: '/static/avatars/avatar1.jpeg'
	    }
	  }
    ]);
	
	const goCardDetail = (card)=>{
		switch(card.action){
			case 'text2image':
			uni.navigateTo({
			  url: '/pages/home/'+card.action,  // 传递参数
			  success: (res) => {
			    console.log('跳转成功');
			  },
			  fail: (err) => {
			    console.log('跳转失败', err);
			  }
			});

			default:
			 console.log("unknow action")
		}
	}

    return {
      features,
      cards,
      bannerImages,
      artworks,
	  goCardDetail
    };
  }
});
</script>

<style scoped>
.page {
  display: flex;
  flex-direction: column;
  background-color: #fff;
}

.banner-image {
  width: 100%;
  height: calc(100vw / 16 * 9); /* 使用16:9比例 */
  object-fit: cover;
}


/* 功能区域网格 */
.features-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 20rpx;
  background-color: #fff;
}

.feature-item {
  width: 22%; /* 控制每个图标的宽度比例 */
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 20rpx;
}

.feature-icon {
  width: 90rpx; /* 调整图标尺寸，使其更大 */
  height: 90rpx;
  margin-bottom: 10rpx;
}

.feature-name {
  font-size: 26rpx; /* 调整文字大小 */
  text-align: center;
}

/* 功能卡片列表 */
.card-list {
  margin-top: 60rpx;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between; /* 保证两列均匀分布 */
  padding: 10rpx;
  background-color: #fff;
  box-sizing: border-box;
  width: 100%;
}

.card {
  width: 49%; /* 每个卡片占父容器的48% */
  box-sizing: border-box; /* 确保宽度包含padding和border */
  display: flex;
  flex-direction: row;
  background-color: #fff;
  border-radius: 12rpx;
  overflow: hidden;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
  margin-bottom: 30rpx;
  padding: 8rpx;
  
}



.card-image {
  width: 35%; /* 图片占据卡片的35%宽度 */
  height: calc(35vw * 3 / 4); /* 根据屏幕宽度动态调整高度，4:3比例 */
  object-fit: cover;
}



.card-info {
  padding: 8rpx;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.card-title {
  font-size: 22rpx;
  font-weight: bold;
  margin-bottom: 20rpx;
  margin-left: 10rpx;
}

.card-description {
  font-size: 20rpx;
  color: #666;
  margin-left: 10rpx;
}

.artwork-gallery {
  padding: 20rpx;
  background-color: #fff;
  margin-top: 40rpx;
}

.gallery-title {
  font-size: 28rpx;
  font-weight: bold;
}

.artwork-swiper {
  height: 380rpx; /* 根据图片高度调整 */
  margin-top: 50rpx;
  overflow: hidden;
  width: 100%;
}

.artwork-swiper-item {
  width: auto; /* 确保每个swiper-item能够自适应内容宽度 */
  margin-left: 10rpx; /* 确保卡片之间有合适的间距 */
  overflow: hidden;
}

.artwork-card {
  display: flex;
  flex-direction: column;
  background-color: #1a1a1a;
  border-radius: 12rpx;
  overflow: hidden;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
  margin-right: 20rpx;
}

.artwork-image {
  width: 100%;
  height: 260rpx; /* 调整图片高度 */
  object-fit: cover;
}

.artwork-info {
  padding: 10rpx;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background-color: #292929;
}

.artwork-title {
  color: #fff;
  font-size: 20rpx; /* 保持字体大小适中 */
  line-height: 1.2; /* 设置行高 */
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box; /* 处理多行文本溢出 */
  -webkit-line-clamp: 2; /* 最多显示2行 */
  -webkit-box-orient: vertical; /* 垂直排列文本 */
}


.uploader-info {
  display: flex;
  align-items: center;
  margin-top: 10rpx;
}

.uploader-avatar {
  width: 40rpx;
  height: 40rpx;
  border-radius: 50%;
  margin-right: 10rpx;
}

.uploader-name {
  color: #aaa;
  font-size: 20rpx;
}
</style>
